<template>
  <div class='app-container'>
    <div ref="graphContainer" class="parent-wrapper" />
  </div>
</template>

<script>
import mxgraph from '@utils/init.js';

import all_svg from '@/assets/tool_svg'

export default {
  name: '',
  module_index: 700,
  module_default: true,
  module_name: '工具栏·SVG',
  data() {
    return {
      all_svg,
      graph: null,
      parent: null,
      num: 0,
      // 构造一个事件处理程序，该处理程序使用橡皮筋选择来选择图中的矩形区域。
      rubberBand: null
    };
  },
  created() { },
  mounted() {
    console.log(all_svg)
    this.init();
    this.inittool();
  },
  methods: {
    init() {
      // 创建全局容器
      this.graph = new mxGraph(this.$refs.graphContainer);

      // 创建全局父元素
      this.parent = this.graph.getDefaultParent();

      mxEvent.disableContextMenu(this.$refs.graphContainer);    // 右键上下文禁用
      this.rubberBand = new mxRubberband(this.graph)            // 拖拽框选

      // 设置可连接
      this.graph.setConnectable(true);

      // 创建通用样式，否则无法显示SVG
      this.graph.getStylesheet().putCellStyle('myStyleSvg',{
        // 可能的值都是带有形状前缀的常量或任何新定义的形状名称
        [mxConstants.STYLE_SHAPE]: mxConstants.SHAPE_LABEL,
        [mxConstants.STYLE_PERIMETER]: mxPerimeter.RectanglePerimeter,
        [mxConstants.STYLE_ROUNDED]: true,
        [mxConstants.STYLE_ARCSIZE]: 6, // 设置圆角程度

        [mxConstants.STYLE_STROKECOLOR]: '#ebb862', // 边框颜色
        [mxConstants.STYLE_FONTCOLOR]: '#333333',
        [mxConstants.STYLE_FILLCOLOR]: 'transparent', // 背景色
        [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR]: '#e6e6e6',

        [mxConstants.STYLE_ALIGN]: mxConstants.ALIGN_CENTER,
        [mxConstants.STYLE_VERTICAL_ALIGN]: mxConstants.ALIGN_CENTER,
        [mxConstants.STYLE_IMAGE_ALIGN]: mxConstants.ALIGN_CENTER,
        [mxConstants.STYLE_IMAGE_VERTICAL_ALIGN]: mxConstants.ALIGN_CENTER,

        [mxConstants.STYLE_IMAGE]: this.all_svg[0],
        [mxConstants.STYLE_IMAGE_WIDTH]: '100',
        [mxConstants.STYLE_IMAGE_HEIGHT]: '300',
        // 该值表示添加到顶点标签顶部的间隔(以像素为单位)(样式仅适用于顶点)。
        [mxConstants.STYLE_SPACING_TOP]: '110',
        // 该值表示添加到顶点标签的每边的间距(以像素为单位)(样式仅适用于顶点)
        [mxConstants.STYLE_SPACING]: '8'
      });
    },
    // 初始化工具栏
    inittool() {
      // 创建一个div作为toolbar的容器
      let tbContainer = document.createElement('div');

      tbContainer.style.position = 'absolute';
      tbContainer.style.overflow = 'auto';
      tbContainer.style.padding = '2px';
      tbContainer.style.right = '0px';
      tbContainer.style.top = '0px';
      tbContainer.style.width = '1050px';
      tbContainer.style.bottom = '0px';
      tbContainer.style.background = '#0001';
      this.$refs.graphContainer.appendChild(tbContainer);
      // 创建一个mxToolbar
      let toolbar = new mxToolbar(tbContainer);
      // 指定是否处理事件。
      toolbar.enabled = false;

      // 展示svg
      this.all_svg.forEach((item,i) => {
        // mxCell：构造在图模型中使用的新单元格。
        let vertex = new mxCell(null,mxGeometry(),'myStyleSvg;');

        // 创建完善工具箱的小图标
        vertex.setVertex(true)
        let img = this.addToolbarItem(toolbar,vertex,this.all_svg[i])

        // // 工具箱事件
        // img.enabled = true;
        // console.log(this.graph.getSelectionModel())
        // // 这个事件是鼠标抬起时的事件
        // this.graph.getSelectionModel().addListener(mxEvent.CHANGE,() => {
        //   console.log(1)
        //   let tmp = this.graph.isSelectionEmpty()
        //   // 这里的20透明度表示的是某个cell元素(节点或者边)获得焦点的时候工具栏的透明度
        //   mxUtils.setOpacity(img,(tmp) ? 100 : 20)
        //   img.enabled = tmp
        // })
      });
    },
    // 创建单个工具箱的小图标
    // toolbar参数是工具栏，prototype参数是vertex也就是新单元格，svg是这个图标对应的svg
    addToolbarItem(toolbar,prototype,svg) {

      // toolbar.addMode:向工具栏添加新项。
      /**
       * 参数：
       * title：作为工具提示使用的可选字符串。
       * icon: 要使用的图像的可选URL。如果没有给出URL，则创建一个按钮。
       * funct: 在鼠标点击时执行的函数。
       * pressedIcon(未传递)：可选的网址，按下的图像。
       * style(未传递)：可选样式类名。默认是mxToolbarItem。
       * factoryMethod(未传递)：可选的工厂方法为弹出菜单，例如： function(menu, evt, cell) { menu.addItem(‘Hello, World!’); }
       */
      let img = toolbar.addMode(null,svg,function (evt,cell) {
        // 这里的evt和cell是mxEvent系统的点击事件所传递的事件对象
        let pt = this.graph.getPointForEvent(evt)

        this.funct(evt,cell,pt.x,pt.y,)
      })


      // 运行到这里时页面已经出现工具栏，且工具栏的icon已经显示，只是单个体积太大，占据了太多的页面空间

      mxEvent.addListener(img,'mousedown',function (evt) {
        if (img.enabled === false) {
          mxEvent.consume(evt)
        }
      })

      // 添加工具栏被拖拽的事件，注释则无法被拖拽，也就无法拖拽创建新单元格
      mxUtils.makeDraggable(img,this.graph,this.funct)
      return img

      let funct = (evt,cell,x,y) => {
        // stopEditing: 停止当前的编辑并触发<editingStopped>事件。
        /**
         * 参数：
         * cancel：指定是否应该存储当前编辑值的布尔值。
         */
        this.graph.stopEditing(false)

        // getModel: 返回包含单元格的mxGraphModel。
        // cloneCell: 返回使用cloneCells创建的给定mxCell(包括子mxCell)的深度克隆。
        /**
         * 参数：
         * cell：待克隆的cell
         * includeChildren： 是否应该用所有后代克隆细胞。默认是true。
         */
        let vertex = this.graph.getModel().cloneCell(prototype);
        vertex.geometry.x = x
        vertex.geometry.y = y

        this.graph.addCell(vertex)
        this.graph.setSelectionCell(vertex)
      }
    },
  }
};
</script>

<style scoped>
</style>